<template>
    <div class="music">
      <div class="m_img">
        <img width="90" src="http://p2.music.126.net/I61ApX2HWW_zFols3As7SQ==/109951167627167443.jpg?param=140y140" alt="歌曲名">
      </div>
      <div class="m_text">歌曲名</div>
      <div class="m_btn">
        <a href="#" class="m_prev" title="上一首"></a>
        <a href="#" class="m_play" title="播放" @click="test"></a>
        <a href="#" class="m_next" title="下一首"></a>
      </div>
      <div class="m_close"></div>
      <audio ref="player" src="http://m801.music.126.net/20221208201406/8b51175df87198a1d8f908fa5bed5f47/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/16352612488/1ea4/22e4/b6e2/29d1d5359fa5068bfea106912ecd7bb3.mp3"  class="m_mp3"></audio>
      
    </div>
</template>
<script>

export default{
    methods:{
        test(){
            this.$refs.player.play();
        }
    }
}
</script>


<style>
.music{
    width: 500px;
    height: 120px;
    background-color: black;
    position: fixed;
    left: 0px;
    bottom: 50px;
    opacity: 0.8;
    box-shadow: 10px 15px 15px 1px;
    /*z-index: 2;*/
}

.music .m_img{
    margin-top: 15px;
    margin-left: 10px;
    float: left;
}

.music .m_text{
    float: left;
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
    margin-left: 20px;
}

.music .m_btn{
    float: left;
    position: absolute;
    left: 300px;
}

.music .m_btn a{
    float: left;
    width: 35px;
    height: 35px;
    margin-top: 50px;
    margin-left: 20px;
}

.music .m_btn .m_prev{
    background: url(image/上一曲_go-start.png);
    background-size: 100%;
}
.music .m_btn .m_play{
    background: url(image/播放_play-one.png);
    background-size: 100%;
}
.music .m_btn .m_next{
    background: url(image/下一曲_go-end.png);
    background-size: 100%;
}

.music .m_close{
    float: right;
    background: url(image/传入_afferent.png) no-repeat;
    background-position: 0px 55px;
    background-size: 100%;
    width: 25px;
    height: 120px;
    cursor: pointer;
}

/*:hover效果先不写*/
</style>